<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上下滚动</title>
		<style>
		li{
			list-style: none;
		}
		#div1{
			width:480px;
			height:600px;
			border:1px dashed red;
			margin:100px auto;
			position: relative;
			overflow: hidden;
		}
		#ul{
			margin:0;
			padding:0;
			position: absolute;
			top:0;
		}
		#ul li{
			width:480px;
			height:300px;
			filter: alpha(opacity:30);
			opacity: 0.3;
		}
		#ul li img{
			width:100%;
		}
		#aBtns{
			width:240px;
			height:20px;
			margin:-50px auto;
		}
		#aBtns li{
			min-width:20px;
			height:20px;
			text-align: center;
			margin-right: -10px;
			display: inline-block;
			border:1px solid #ccc; 
			font-weight: bold;
		}
		.active{
			background:yellow;
			color:#fff;
		}
		</style>
		<script>
			window.onload=function()
			{
				var oDiv1=document.getElementById('div1');
				var oUl=document.getElementById('ul');
				var aLi=oUl.getElementsByTagName('li');
				var oBtn1=document.getElementById('btn1');
				var oBtn2=document.getElementById('btn2');
				var aBtns=document.getElementById('aBtns');
				var aInp=aBtns.getElementsByTagName('input');
				var arr=[];
				var now=0;
				var dir=null;
				oUl.innerHTML+=oUl.innerHTML;
				var speed=-aLi[0].offsetHeight;
				function go(){
					init1();
					oUl.style.top=oUl.offsetTop+speed+'px';
					if(speed<0)
					{
						now++;
						init();
					
					aLi[now].style.opacity=1;
						now=now%5;
					aInp[now+1].className="active";
					now%=5;
					
					}
					else{
						if(now==0)
						{
							now=9;
						}
						else{
							now--;
						}
						init();
					now=now%5;
					aLi[now].style.opacity=1;
					aInp[now+1].className="active";
					}
				}
				arr.push(setInterval(go,1500));
				/*移入移出*/
				oDiv1.onmouseover=function(){
					init2();
				}
				oDiv1.onmouseout=function(){
					arr.push(setInterval(go,1500));
				}
				/*转变方向*/
				oBtn1.onclick=function(){
					init2();
					speed=-aLi[0].offsetHeight;
					arr.push(setInterval(go,1500));
				}
				oBtn2.onclick=function(){
					init2();
					speed=aLi[0].offsetHeight;
					arr.push(setInterval(go,1500));
				}
				/*按钮控制显现哪一张图片*/
				for(var k=0;k<aInp.length;k++)
				{
					aInp[k].index=k;
					aInp[k].onclick=function()
					{
					if(speed<0)
					{
						dir=-1;
					}
					else{
						dir=1;
					}
					if(this.index==0)
					{
						/*上一张*/
					if(oUl.offsetTop>=0)
					{
						oUl.style.top=-Math.floor(aLi[0].offsetHeight*aLi.length/2)+'px';
					}
					oUl.style.top=oUl.offsetTop+(speed*dir)+'px';
						if(now==0)
						{
							now=5;
						}
					}
					else if(this.index==aInp.length-1)
					{
					/*下一张*/
					if(oUl.offsetTop<=-aLi[0].offsetHeight*Math.floor(aLi.length/2))
					{
						oUl.style.top=0;
					}
					oUl.style.top=oUl.offsetTop-(speed*dir)+'px';
						now++;
						if(now==5)
						{
							now=5;
						}
						else
						{
							now%=5;
						}	
						now++;
					}
					else{
						/*任意一张*/
						now=this.index-1;
						oUl.style.top=-aLi[0].offsetHeight*(now)+'px';	
						now%=5;
						now++;
					}					
					init();
					//alert(now);
					aLi[now-1].style.opacity=1;
					if(now==6)
					{
						now=1;
					}
					aInp[now].className="active";
					now--;
					init2();
					arr.push(setInterval(go,1500));	
						
					}
				}
				function init(){
					/*透明度以及按钮背景初始化*/
					for(var i=0;i<aInp.length;i++)
					{
						aInp[i].className="";
					}
					
					for(var j=0;j<aLi.length;j++)
					{
						
						aLi[j].style.opacity=0.3;
						aLi[j].style.filter="alpha(opacity:30)";
					}
				}
				function init1(){
					/*定时器图片滚动拉回*/
					if(oUl.offsetTop<=Math.floor(-aLi[0].offsetHeight*aLi.length/2)&&speed<0)
					{
						oUl.style.top=0;
					}
					else if(oUl.offsetTop>=0&&speed>0)
					{
						oUl.style.top=-Math.floor(aLi[0].offsetHeight*aLi.length/2)+'px';
					}
				}
				function init2(){
					/*清空定时器*/
					for(var each in arr)
					{
						clearInterval(arr[each]);
					}
				}

			}
		</script>
	</head>
	<body>
	<input type="button" value="向上" id="btn2">
	<input type="button" value="向下" id="btn1">
		<div id="div1">
			<ul id="ul">
				<li style="opacity: 1;filter:alpha(opacity:100);"><img src="./film/fj1.jpg"/></li>
				<li><img src="./film/fj2.jpg"/></li>
				<li><img src="./film/fj3.jpg"/></li>
				<li><img src="./film/fj4.jpg"/></li>
				<li><img src="./film/fj5.jpg"/></li>
			</ul>
		</div>
		<div id="aBtns">
			<li ><input type="button" value="PRE"></li>
			<li ><input type="button" value="1" class="active"></li>
			<li ><input type="button" value="2"></li>
			<li><input type="button" value="3"></li>
			<li><input type="button" value="4"></li>
			<li><input type="button" value="5"></li>
			<li><input type="button" value="NEXT"></li>
		</div>
	</body>
</html>